<template>
	<div class="card">
		<el-card :shadow="props.shadow">
			<template v-if="props.title" #header>
				<div class="flex justify-between py-2">
					<div class="title">{{ props.title }}</div>
					<div class="right_box">
						<div class="topCenter"><slot name="topCenter"></slot></div>
						<div class="topRight"><slot name="topRight"></slot></div>
					</div>
				</div>
			</template>
			<slot name="default"></slot>
			<div class="content_box">
				<div class="contentLeft">
					<slot name="contentLeft"></slot>
				</div>
				<div class="contentRight">
					<slot name="contentRight"></slot>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import HyTitle from './CardTitle.vue';
const props = defineProps({
	shadow: {
		type: String,
		default: 'hover',
	},
	title: {
		type: String,
		default: '',
	},
});
</script>
<style scoped lang="scss">
.card {
	border-radius: 10px;
	margin-top: 15px;
	:deep(.el-card__header) {
		padding: 5px 10px;
	}

	:deep(.el-card__body) {
		padding: 20px 10px;
	}

	.title {
		font-size: 16px;
		font-weight: 600;
	}

	.right_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 60%;
		.topCenter {
			font-size: 16px;
			font-weight: 600;
		}
		.topRight {
			font-size: 16px;
			font-weight: 600;
			color: #497eed;
			margin-right: 10px;
		}
	}

	.content_box {
		display: flex;
		justify-content: space-between;
		.contentRight {
			width: 60%;
		}
	}
}
</style>
